/**video和audio的共同属性 */
// autoplay: 一个布尔属性，表示媒体是否应在加载后立即开始播放。
// controls: 一个布尔属性，表示是否显示浏览器默认的媒体控制条。
// loop: 一个布尔属性，表示媒体是否应在结束时重新开始播放。
// muted: 一个布尔属性，表示媒体是否应该被静音。
// preload: 表示在页面加载时是否应该加载媒体文件的值，可以是 "none"、"metadata" 或 "auto"。
// src: 表示媒体文件的URL。

//事件
// play: 当媒体开始播放时触发。
// pause: 当媒体暂停时触发。
// ended: 当媒体播放结束时触发。
// timeupdate: 当媒体的播放位置发生改变时触发，通常用于实时更新播放进度条。
// volumechange: 当媒体的音量发生改变时触发。
// loadedmetadata: 当媒体的元数据加载完成时触发。
// canplay: 当媒体可以开始播放时触发。
// error: 当媒体加载或播放过程中发生错误时触发。

/**检测编码器 */
if (MediaRecorder.isTypeSupported('video/webm;codecs="vp9"')) {
    console.log('浏览器支持 VP9 编解码器');
} else {
    console.log('浏览器不支持 VP9 编解码器');
}

//或者canPlayType 
//用于检测浏览器是否能够播放特定类型的音频或视频文件。这个方法返回一个表示浏览器支持播放指定媒体类型的字符串。
var video = document.createElement('video');
if (video.canPlayType('video/mp4') === 'probably') {
    console.log('浏览器可能支持播放 MP4 格式的视频');
} else if (video.canPlayType('video/mp4') === 'maybe') {
    console.log('浏览器可能支持播放 MP4 格式的视频，但不确定');
} else {
    console.log('浏览器不支持播放 MP4 格式的视频');
}

/**拖放事件 */
// dragstart: 当用户开始拖动元素时触发。
// drag: 当用户正在拖动元素时触发。
// dragenter: 当被拖动的元素进入目标元素的范围时触发。
// dragover: 当被拖动的元素在目标元素上移动时触发。
// dragleave: 当被拖动的元素离开目标元素的范围时触发。
// drop: 当被拖动的元素放置在目标元素上时触发。
// dragend: 当用户完成拖放操作时触发。

/**可拖动能力 */
// 添加draggable属性（布尔值）

/**visiblityState */
// visibilityState 是 Web 开发中用于监测页面或文档可见性状态的属性。它通常用于处理页面在不同可见性状态下的行为，比如当页面被最小化、切换到其他标签页或程序被最小化时。
// visibilityState 属性有三个可能的值：
// visible: 表示页面当前处于可见状态。
// hidden: 表示页面当前处于不可见状态，比如被最小化、切换到其他标签页或程序被最小化。
// prerender: 表示页面处于预渲染状态，即页面正在加载但并未被用户所看到。

/**postMessage跨窗口通信 */
// 使用 postMessage 方法，可以向目标窗口发送消息，
// 并在目标窗口中通过监听 message 事件来接收消息。
// 这种方式可以实现跨域通信，比如在父窗口和嵌套的 iframe 之间进行通信，或者在主页面和 Web Worker 之间进行通信。
// 发送消息
var targetWindow = document.getElementById('target').contentWindow;
targetWindow.postMessage('Hello, target window!', 'http://targetwindow.com');

// 接收消息
window.addEventListener('message', function (event) {
    if (event.origin === 'http://targetwindow.com') {
        console.log('Received message: ' + event.data);
    }
});
/**template标签 */
// 使用 <template> 标签可以将一些不需要立即展示的内容进行定义，
// 比如复杂的 HTML 结构、表格、列表等。这些模板可以在需要的时候进行克隆和插入到文档中，以提高性能和代码的可维护性。
{/*
 <template id="myTemplate">
  <h2>这是一个模板</h2>
  <p>模板内容可以包含任意 HTML 结构</p>
</template>

<script>
  // 克隆模板并插入到文档中
  var template = document.getElementById('myTemplate');
  var clone = document.importNode(template.content, true);
  document.body.appendChild(clone);
</script> 
*/}